<template> 
    <div class="agianst">
        <div class="header">
            <div class="title">
                Against Config
            </div>
        </div>
        <div class="leftPan">
            <div class="lstSolutions"> 
                <div class="solution"
                    v-for = "(solution,soIndex) in solutions"
                    :key="soIndex"
                >
                    <div class="info">
                        <div class="title">
                            {{solution.solutionCode}} - {{solution.solutionName}}
                        </div>
                        <div class="desc">
                            {{solution.preGropuCount}} / {{solution.preMemberCount}} ==> {{solution.groupCount}} / {{solution.memberCount}} 
                        </div>
                    </div>
                    <div class="ac">
                        <el-button type="text" @click="showSolutionDlg(solution.solutionId)">修改</el-button>
                        <el-button type="text">删除</el-button>
                        <el-button type="text" @click="onPickSolution(solution)">详细</el-button>
                    </div>
                </div>
            </div>
            <div class="solutionAcs">
                <el-button type="primary" @click="showSolutionDlg(0)">
                    <i class="fa fa-plus"></i> 新建方案
                </el-button>
            </div>
        </div>
        <div class="main">
            <div class="page">
                <!-- <div ref="graphContainer" class="graphContainer"></div> -->
                <div class="panFrom"> 
                    <el-tree
                        ref="tree1"
                        :data="srcs"
                        node-key="nodeId" 
                        default-expand-all
                        draggable
                        :props="srcProps" 
                        :allow-drop="allowDrop"
                        :allow-drag="allowDrag"
                        @node-drag-start="handleDragstart" 
                        @node-drag-end="handleDragend"
                        >
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span>{{ node.label }}</span>
                            <span v-if="data.assiged && data.assiged ==1">
                                <i class="fa fa-cogs"></i> {{ data.targetGroup }} -  {{ data.targetMember }} 
                            </span>
                        </span>

                    </el-tree>
                </div>
                <div class="panTo"> 
                    <el-tree
                        ref="tree2"
                        :data="targets"
                        node-key="nodeId" 
                        default-expand-all 
                        :props="targetProps" 
                        draggable
                        :allow-drop="allowDrop"
                        :allow-drag="allowDrag"
                        @node-drag-start="handleVirStat" 
                        @node-drag-end="handleVirDragend" 
                        
                    >
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span>{{ node.label }}</span>
                            <span v-if="data.assiged && data.assiged ==1">
                                <i class="fa fa-cogs"></i> {{ data.srcGroup }} -  {{ data.srcMember }} 
                            </span>
                        </span>
                    </el-tree>
                </div>
            </div>
        </div>
        <el-dialog
            title="solution"
            :visible.sync="solutionDlg.show"
            width="480px">
            <div class="editForm">
                <el-form label-position="right" label-width="120px" :model="solutionDlg.info">
                    <el-form-item label="code">
                        <el-input v-model="solutionDlg.info.solutionCode"></el-input>
                    </el-form-item>
                    <el-form-item label="name">
                        <el-input v-model="solutionDlg.info.solutionName"></el-input>
                    </el-form-item>
                    <el-form-item label="preGroup">
                        <el-input v-model="solutionDlg.info.preGropuCount"></el-input>
                    </el-form-item>
                    <el-form-item label="preMember">
                        <el-input v-model="solutionDlg.info.preMemberCount"></el-input>
                    </el-form-item>
                    <el-form-item label="group">
                        <el-input v-model="solutionDlg.info.groupCount"></el-input>
                    </el-form-item>
                    <el-form-item label="member">
                        <el-input v-model="solutionDlg.info.memberCount"></el-input>
                    </el-form-item>
                    <el-form-item label="description">
                        <el-input v-model="solutionDlg.info.solutionDesc"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="solutionDlg.show = false">取 消</el-button>
                <el-button type="primary" @click="saveSolution">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import mx from 'mxgraph';
import { constants } from 'zlib';
    console.log(mx)
    
    const mxgraph = mx({
        mxImageBasePath: './src/images',
        mxBasePath: './src'
    })
    const MxGraph = mxgraph.mxGraph;
    export default {
        mounted() {
            var me = this;
            try{
                me.refreshSolutions();
                //me.refreshGraph();
            }
            catch(er){
                console.log(er);
            }
        },
        
        data() {
            return {
                solutions: [],
                currentSolutionIndex:0,
                solutionDlg:{
                    show:false ,
                    id:0,
                    info:{}
                },
                currentSolutionId:0,
                srcs:[],
                srcProps:{
                    children: 'children',
                    label: 'label',
                    disabled:(data, node)=>{
                        console.log(data)
                        var flag = data.flag>0;
                        return flag;
                    }
                },
                targets:[],
                targetProps:{
                    children: 'children',
                    label: 'label'
                }

            };
        },

        methods: {
            refreshSolutions() {
                var me = this;
                try{
                    var key = "against/getSolutions";
                    me.sys.query(key, { }).then(res=>{
                        me.solutionDlg.show = false;
                        me.solutions = res ;
                    })

                }
                catch(er){
                    console.log(er);
                }
            },
            showSolutionDlg(solutionId) {
                var me = this;
                try{
                    var info ={} ;
                    if( solutionId>0 ){
                        info = me.solutions.find( s=>{
                            return s.solutionId == solutionId;
                        })
                    }
                    else{
                        info ={
                            solutionId:0,
                            solutionCode:"",
                            solutionName:"",
                            preGropuCount : 1 ,
                            preMemberCount:2 ,
                            groupCount: 1,
                            memberCount:2 ,
                            solutionDesc:""
                        }
                    }
                    me.solutionDlg.info = info;
                    me.solutionDlg.show = true;
                }
                catch(er){
                    console.log(er);
                }
            },
            saveSolution() {
                var me = this;
                try{
                    var key = me.solutionDlg.info.solutionId==0? "against/createSolution":"against/editSolution";
                    me.sys.query(key, me.solutionDlg.info).then(res=>{
                        console.log(res);
                        if( res && res.rowcount && res.rowcount>0 ){
                            me.refreshSolutions();
                        }
                        else{
                            me.$message.error('提交失败！');
                        }
                    })
                }
                catch(er){
                    console.log(er);
                }
            },
            onPickSolution(solution) {
                var me = this;
                try{
                    me.refreshItems(solution.solutionId)
                }
                catch(er){
                    console.log(er);
                }
            },
            refreshGraph() {
                var me = this;
                try{
                    var graph = new MxGraph(this.$refs.graphContainer)

                    // Gets the default parent for inserting new cells. This
                    // is normally the first child of the root (ie. layer 0).
                    var parent = graph.getDefaultParent()

                    // Adds cells to the model in a single step
                    graph.getModel().beginUpdate()
                    try {
                        const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30)
                        const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30)

                        graph.insertEdge(parent, null, '', v1, v2)
                    } finally {
                    // Updates the display
                        graph.getModel().endUpdate()
                    }  
                }
                catch(er){
                    console.log(er);
                }
            },
            refreshItems(solutionId) {
                var me = this;
                try{
                    me.currentSolutionId = solutionId;
                    var key = "against/getItems";
                    me.sys.query(key, { solutionId: solutionId }).then(res=>{ 
                        me.srcs = (JSON.parse(res[0].srcData))[0].groups;
                        me.srcs.forEach( i=>{
                            i.label = "第" +i.srcGroup +"组";
                            if( i.children && i.children.length>0){
                                i.children.forEach( item=>{
                                    item.label = "第" +item.srcRank +"名";
                                })
                            }
                        })
                        me.targets = (JSON.parse(res[0].targetData))[0].groups;
                        me.targets.forEach( i=>{
                            i.label = "第" +i.targetGroup +"组";
                            if( i.children && i.children.length>0){
                                i.children.forEach( item=>{
                                    item.label = "第" +item.targetMember +"位";
                                })
                            }
                        })
                        console.log(me.srcs)
                        console.log(me.targets)
                    })
                }
                catch(er){
                    console.log(er);
                }
            },
            handleDragstart(node, event) {
                //console.log('start', node, event) 
                this.$refs.tree2.$emit('tree-node-drag-start', event, {node: node});
            }, 
            handleDragend(draggingNode, endNode, position, event) {
                console.log('endsrc', draggingNode, endNode, position, event) ;
                this.$refs.tree2.$emit('tree-node-drag-end', event, {draggingNode, endNode, position, event}); 
            }, 
            handleVirStat(node, event) {
                console.log('startTarget', node, event) ; 
            },
            handleVirDragend(srcNode, targetNode, position, event) {
                var me = this;
                try{
                    console.log('endTarget', srcNode, targetNode, position, event) ; 
                    var flag = srcNode && targetNode && srcNode.data && targetNode.data &&  srcNode.data.nodeType == "src" &&  targetNode.data.nodeType == "target";
                    if(flag ){
                        console.log(srcNode.data);
                        console.log(targetNode.data);
                        var ps ={
                            solutionId: srcNode.data.solutionId ,
                            preGroup : srcNode.data.srcGroup ,
                            preRank  : srcNode.data.srcRank ,
                            groupOrder  : targetNode.data.targetGroup ,
                            memberOrder  : targetNode.data.targetMember 
                        };
                        var key = "against/setSolutionItem";
                        me.sys.query(key, ps).then(res=>{
                            console.log(res);
                            me.refreshItems(me.currentSolutionId);
                        })
                    }
                    else{
                        me.refreshItems(me.currentSolutionId);
                    }
                }
                catch(er){
                    console.log(er);
                }
            },
            allowDrop(draggingNode, dropNode, type) {
                return 1>0;
            },
            allowDrag(draggingNode) {
                return 1>0;
            }, 
        },
    }
</script>

<style lang="less" scoped>
    .agianst{
        height: 100%;
        .header{
            position: fixed;
            width: 100%;
            padding: 15px;
            box-shadow: 2px 2px 2px #999;
            .title{
                font-weight: bold;
            }
            background-color: #fff;
            z-index: 999;
        }
        .leftPan{
            position: fixed;
            width: 400px;
            background-color: #fff;
            height: 100%;
            z-index: 990; 
            padding-top: 50px;
            display: flex;
            flex-direction: column;

            .solutionAcs{
                background-color: #999;
                padding: 15px;
            }
            .lstSolutions{
                flex: 1;
                overflow-x: hidden;
                overflow-y: scroll;
                .solution{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 10px;
                    border-bottom: 1px solid #ddd;
                    .info{
                        .title{
                            font-weight: bold;
                        }
                    }
                }
            }
        }
        .main{
            height: 100%;
            padding-left: 400px;
            padding-top: 50px;
            .page{
                width: 100%;
                height: 100%;
                padding: 15px;
                display: flex;
                .panFrom{
                    width: 380px;
                }
                .panTo{
                    flex: 1;
                    padding-left: 15px;
                }
                .graphContainer{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    .custom-tree-node{
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 10px;
    } 
</style>